---
title: Drawer
description:
  Used to render a content that slides in from the side of the screen.
links:
  source: components/drawer
  storybook: components-drawer--basic
  recipe: drawer
  ark: https://ark-ui.com/react/docs/components/dialog
---

<ExampleTabs name="drawer-basic" />

## Usage

```tsx
import { Drawer } from "@chakra-ui/react"
```

```tsx
<Drawer.Root>
  <Drawer.Backdrop />
  <Drawer.Trigger />
  <Drawer.Positioner>
    <Drawer.Content>
      <Drawer.CloseTrigger />
      <Drawer.Header>
        <Drawer.Title />
      </Drawer.Header>
      <Drawer.Body />
      <Drawer.Footer />
    </Drawer.Content>
  </Drawer.Positioner>
</Drawer.Root>
```

## Examples

### Controlled

Use the `open` and `onOpenChange` props to control the drawer component.

<ExampleTabs name="drawer-controlled" />

### Sizes

Use the `size` prop to change the size of the drawer component.

<ExampleTabs name="drawer-with-sizes" />

### Context

Use the `DrawerContext` component to access the drawer state and methods from
outside the drawer.

<ExampleTabs name="drawer-with-context" />

### Offset

Pass the `offset` prop to the `DrawerContent` to change the offset of the drawer
component.

<ExampleTabs name="drawer-with-offset" />

### Placement

Use the `placement` prop to change the placement of the drawer component.

<ExampleTabs name="drawer-with-placement" />

### Initial Focus

Use the `initialFocusEl` prop to set the initial focus of the drawer component.

<ExampleTabs name="drawer-with-initial-focus" />

### Custom Container

Here's an example of how to render the drawer component in a custom container.

Consider setting `closeOnInteractOutside` to `false` to prevent the drawer from
closing when interacting outside the drawer.

<ExampleTabs name="drawer-with-custom-container" />

### Header Actions

Here's an example of rendering actions in the header of the drawer component.

<ExampleTabs name="drawer-with-header-actions" />

## Props

### Root

<PropTable component="Drawer" part="Root" />
